<template>
  <div>
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 350px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input
                type="password"
                v-model="user.password"
                placeholder="请输入密码"
                @keydown.enter.native="doLogin"
              ></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  //单页面中不支持前面的data:{}方式
  data() {
    //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
    return {
      user: {
        username: "admin",
        password: "123456"
        //为了登录方便，可以直接在这里写好用户名和密码的值
      }
    };
  },
  methods: {
    doLogin() {
      //一点击登录按钮，这个方法就会执行
      let username = this.user.username;
      let password = this.user.password;

      this.$axios({
        method: "post",
        url: this.GLOBAL.userLogin,
        data: {
          username: username,
          password: password
        }
      })
        .then(result => {
          if (result.data.code == 200) {
            this.$message({
              message: "登录成功",
              type: "success"
            });
            this.$router.push("../index");
            window.localStorage.setItem("token", result.data.result.token);
            window.localStorage.setItem(
              "username",
              result.data.result.userInfo.username
            );
            // Vue.delete(state,'age') //删除
          } else {
            this.$message.error(result.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
      // this.$router.push("../about");
    }
  }
};
</script>